<template>
  
  <el-form
    ref="formRef"
    v-loading="formLoading"
    :model="formData"
    :rules="formRules"
    label-width="70px"
  >
    <div class="flex pt-5 pb-5 align-center items-center justify-center">
      <div>电子秤状态</div>
      <div :class="formData.communicateStatus ? 'lamp-green':'lamp-red' "></div>
      <div>通讯状态</div>
    </div>
    <el-row>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="电子秤" prop="elecId" class="ml-10px mr-10px">
          <el-select v-model="formData.elecId" placeholder="请选择" @change="elecSelectedFun(formData.elecId)">
            <el-option
              v-for="(item, index) in elecInfo"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="内部码" prop="id" class="ml-10px mr-10px">
          <el-input v-model="formData.id" clearable placeholder="请输入" @keyup.enter="handleQuery"/>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- <el-divider /> -->
    <el-row>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="重量" prop="weight" class="ml-10px mr-10px">
          <el-input v-model="formData.weight" clearable placeholder="重量" readonly />
        </el-form-item>
      </el-col>
      <!-- <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="纸板代码" prop="name" class="ml-10px mr-10px">
          <el-input v-model="formData.name" clearable disabled placeholder="纸板代码" />
        </el-form-item>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="产品型号" prop="proType" class="ml-10px mr-10px">
          <el-input v-model="formData.proType" clearable disabled placeholder="产品型号" />
        </el-form-item>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="杆子刚性" prop="name" class="ml-10px mr-10px">
          <el-input v-model="formData.name" clearable disabled placeholder="杆子刚性" />
        </el-form-item>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="杆子造型" prop="name" class="ml-10px mr-10px">
          <el-input v-model="formData.name" disabled clearable placeholder="杆子造型" />
        </el-form-item>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="杆子长度" prop="name" class="ml-10px mr-10px">
          <el-input v-model="formData.name" disabled clearable placeholder="杆子长度" />
        </el-form-item>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="北海工厂" prop="name" class="ml-10px mr-10px">
          <el-input v-model="formData.name" disabled clearable placeholder="北海工厂" />
        </el-form-item>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="订单编号" prop="orderNo" class="ml-10px mr-10px">
          <el-input v-model="formData.orderNo" disabled clearable placeholder="订单编号" />
        </el-form-item>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form-item label="流水编码" prop="flowWater" class="ml-10px mr-10px">
          <el-input v-model="formData.flowWater" disabled clearable placeholder="流水编码" />
        </el-form-item>
      </el-col> -->
    </el-row>
  </el-form>
  <!-- <el-row>
    <el-col :xs="24" class="mt-5px col-big-btn">
      <el-button :disabled="formLoading" type="primary" @click="submitForm" class="big-btn">确 定</el-button>
    </el-col>
  </el-row> -->
</template>

<style lang="scss" scoped>
  // .circle-lamp{
  //   width: 20px;
  //   height: 20px;
  //   display: inline-block;
  //   border-radius: 50%;
  //   margin: auto 10px;
  // }
  .lamp-green{
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    margin: auto 10px;
    border: 1px solid #1b841c;
    background: #1b841c;
    box-shadow: 1px 1px 27px #1b841c;
  }
  .lamp-red{
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    margin: auto 10px;
    border: 1px solid #f56c6c;
    background: #f56c6c;
    box-shadow: 1px 1px 5px #f56c6c;
  }
  @media (max-width: 768px) {
    .col-big-btn{
      text-align: center;
      .big-btn{
        width: 80%;
      }
    }
  }
  
</style>

<script lang="ts" setup>
  import * as weightApi from '@/api/hcxly/weight/Index'
  import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import { number } from 'vue-types';

  defineOptions({ name: 'weight' })

  const { wsCache } = useCache()
  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formData = ref({
    elecId: undefined,
    id: '',
    weight: '',
    communicateStatus: 0,
    proType: '',
    orderNo:'',
    flowWater: ''
  })
  const formRules = reactive({
    elecId: [{ required: true, message: '电子秤不能为空', trigger: 'blur' }],
    id: [{ required: true, message: '内码不能为空', trigger: 'blur' }]
    // weight: [{ required: true, message: '重量不能为空', trigger: 'blur' }]
  })
  const formRef = ref() // 表单 Ref
  const statusSelected ={
    ip: '',
    port: undefined
  }

  /** 获取下拉框的数据  */
  const elecInfo = ref([])
  const elecSelected = ref()
  const getElecInfo = async () => {
    elecInfo.value = await weightApi.getWeight()
    elecSelected.value = await weightApi.getElecSelected()
    
    // formData.value.status = elecSelected.value.status
    for(let i in elecInfo.value){
      // console.log(elecInfo.value[i])
      // console.log(elecSelected.value.id === elecInfo.value[i].id)
      if(elecSelected.value.id === elecInfo.value[i].id){
        formData.value.elecId = elecSelected.value.id

        statusSelected.port = elecSelected.value.port
        statusSelected.ip = elecSelected.value.ip
        formData.value.communicateStatus = await weightApi.getElecStatus(statusSelected)
        console.log(formData.value.communicateStatus)
      } 
    }
    
  }

  /** 初始化 **/
  onMounted(() => {
    getElecInfo()
  })

  const weightmsg = ref()
  /** 提交表单 */
  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
  const submitForm = async () => {
    // 校验表单
    if (!formRef) return
    const valid = await formRef.value.validate()
    if (!valid) return
    // 提交请求
    formLoading.value = true
    try {
      console.log(formData.value)
      const formInfo = formData.value as unknown as weightApi.weightVO
      // weightmsg.value = await weightApi.updateWeight(formInfo)

      const { code, data, msg } = await weightApi.updateWeight(formInfo)
      message.success('操作成功，'+ msg)
      // console.log(code)
      // console.log(data)
      // if(code !== 0){
      //   message.error(msg)
      // }
      // console.log(weightmsg.value)
      // message.success('修改成功，'+ weightmsg.value)
      // message.error('警告：'+ weightmsg.value)
    } finally {
      formLoading.value = false
      // 清空，从而触发刷新data
      formData.value.id = ''
      formData.value.weight = ''
      // resetForm()
    }
  }

  /** 重置表单 */
  const resetForm = () => {
    formData.value = {
      elecId: undefined,
      id: '',
      weight: '',
      communicateStatus: 0,
      proType: '',
      orderNo:'',
      flowWater: ''
    }
    formRef.value?.resetFields()
  }

  /** 选择电子秤 */
  const elecSelectedFun = async (id) => {
    //获取选中的电子秤信息
    const ipPortSelected ={
      id: undefined,
      name: '',
      ip: '',
      port: undefined
    }
    
    for(let i in elecInfo.value){
      console.log(elecInfo.value[i])
      
      // console.log(elecSelected.value.id === elecInfo.value[i].id)
      if(id === elecInfo.value[i].id){
        ipPortSelected.id = elecInfo.value[i].id
        ipPortSelected.port = elecInfo.value[i].port
        ipPortSelected.ip = elecInfo.value[i].ip
        ipPortSelected.name = elecInfo.value[i].name

        statusSelected.port = elecInfo.value[i].port
        statusSelected.ip = elecInfo.value[i].ip
      } 
    }
    await weightApi.savaElecSelected(ipPortSelected)
    formData.value.communicateStatus = await weightApi.getElecStatus(statusSelected)
    
    console.log(id)
  }

  /** 扫描内码获取重量 */
  const handleQuery = async () => {
    //选择电子秤后才能扫描内码
    if(!formData.value.elecId) {
      message.error('请选择电子秤')
      return
    }
    // console.log(formData.value.id)
    // const internalCode = formData.value.id
    // let internalArry: string[]
    // internalArry = internalCode.split('_')
    // if(internalArry.length <= 0){
    //   return
    // }
    // formData.value.orderNo = internalArry[0]
    // formData.value.proType = internalArry[1]
    // formData.value.flowWater = internalArry[2]

    //获取选中的电子秤信息
    const ipPort ={
      ip: '',
      port: undefined
    }
    for(let i in elecInfo.value){
      if(elecInfo.value[i].id === formData.value.elecId){
        ipPort.ip = elecInfo.value[i].ip
        ipPort.port = elecInfo.value[i].port
      }
    }
    // console.log(ipPort)
    formData.value.weight = await weightApi.updateMaWeight(ipPort) //获取更新重量
    submitForm()
    // console.log(formData.value.weight)
  }
</script>
